<template>
  <div id="app">
    <!-- Seller type header template -->
    <v-seller-header
      v-if="currentPageType === '' || currentPageType === 'seller'"
    ></v-seller-header>

    <!-- Buyer type header template -->
    <v-buyer-header
      v-if="currentPageType === 'buyer'"
    ></v-buyer-header>

    <div id="render">
      <router-view/>
    </div>

    <!-- 页脚 -->
    <v-footer v-if="!$route.meta.hideFooter"></v-footer>

    <v-login v-if="showStatus.login"></v-login>
  </div>
</template>

<script>
import SellerHeader from './components/SellerHeader.vue'
import BuyerHeader from './components/BuyerHeader.vue'
import Footer from './components/Footer.vue'
import Login from './components/Login.vue'
export default {
  name: 'app',
  components: {
    'v-seller-header': SellerHeader,
    'v-buyer-header': BuyerHeader,
    'v-footer': Footer,
    'v-login': Login
  },
  data () {
    return {
      currentPageType: ''
    }
  },
  computed: {
    // 判断当前页面类型
    listenCurrentPageType () {
      return this.$route.matched[0]
    }
  },
  watch: {
    listenCurrentPageType (curValue) {
      let tempMatchedPath = curValue.path.toLowerCase()
      if (tempMatchedPath === '/buyer') {
        this.currentPageType = 'buyer'
      } else if (tempMatchedPath === '/seller') {
        this.currentPageType = 'seller'
      } else if (tempMatchedPath === '') {
        this.currentPageType = ''
      }
    }
  }
}
</script>
